{% extends 'window.twig' %}
{% block end_body %}
    <script type="text/javascript" src="{{ __URL__ }}/static/assets/echarts/echarts.js"></script>
    <script type="text/javascript">

        require.config({
            paths: {
                echarts: '{{ __URL__ }}/static/assets/echarts'
            }
        });
        var option = {
            title : {
                text: '最近7天咨询量变化',
                subtext: '数据来源:纯属虚构'
            },
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['网络咨询','电话咨询']
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: true},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            xAxis : [
                {
                    type : 'category',
                    boundaryGap : false,
                    data : ['5/8','5/9','5/10','5/11','5/12','5/13','5/14']
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    axisLabel : {
                        formatter: '{value} 人'
                    }
                }
            ],
            series : [
                {
                    name:'网络咨询',
                    type:'line',
                    data:[41, 35, 38, 53, 66, 43, 52],
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均人数'}
                        ]
                    }
                },
                {
                    name:'电话咨询',
                    type:'line',
                    data:[11, 11, 15, 19, 22, 16, 18],
                    markPoint : {
                        data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                        ]
                    },
                    markLine : {
                        data : [
                            {type : 'average', name: '平均人数'}
                        ]
                    }
                }
            ]
        };
        require(
                [
                    'echarts',
                    'echarts/chart/line',
                    'echarts/chart/bar',
                ],
                function (ec) {
                    var chartBar = ec.init(document.getElementById('chart'),'macarons');
                    chartBar.setOption(option);
                }
        );
    </script>
{% endblock %}
{% block body %}
    <div class="data-view">
        <div id="chart" style="width: 770px;height: 440px;"></div>
    </div>
{% endblock %}